<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>下拉框搜索</title>
    <script src="jquery.min.js"></script>
    <script src="searchable-select.js"></script>
    <script src="searchserver-select.js"></script>
    <link href="searchable-select.css" rel="stylesheet">
    <script type="text/javascript">
        var a,b,b1;
        //下拉搜索demo
        $(function () {
            a = $('#a').searchableSelect();
        });
        //下拉搜索分页框demo
        $(function () {
            b = $('#b').searchServerSelect({}, function (keyWord, pageIndex = 1, pageSize = 10) {
                //TODO 自定义下拉框数据
                console.log("以下为测试数据获取方式，请自定义数据")
                let promise1 = $.ajax({
                    url: "/dict/baseShipPort",
                    data: {name:keyWord,current:pageIndex,pageSize:pageSize},
                    type: "post",
                    timeout:5000, //设置超时的时间
                })
                return new Promise(function (resolve, reject) {
                    promise1.then(function (data) {
                        if (data.success) {
                            let res = {}
                            let dataList = []
                            let pager = data.data
                            let records = pager.data
                            for (let i = 0; i < records.length; i++) {
                                dataList.push({value:records[i].portCode,label:records[i].displayName})
                            }
                            res.pageIndex = pager.pageIndex
                            res.pageSize = pager.pageSize
                            res.itemCount = pager.itemCount
                            res.data = dataList
                            resolve(res)
                        }else{
                            reject(data)
                        }
                    },function (data) {
                        console.log("以上为测试数据获取方式，请自定义数据")
                        reject(data)
                    })
                })
            });
            b1 = $('#b1').searchServerSelect({}, function (keyWord, pageIndex = 1, pageSize = 10) {
                let res = {}
                //测试数据
                let dataList = []
                for (let i = 0; i < 10; i++) {
                    dataList.push({value: keyWord + i, label: keyWord + i})
                }
                res.pageIndex = pageIndex
                res.pageSize = pageSize
                res.itemCount = 105
                res.data = dataList
                return new Promise(function(resolve, reject){
                    //当异步代码执行成功时，我们会调用resolve, 当异步代码失败时就会调用reject
                    if(1===pageIndex){
                        setTimeout(function () {
                            resolve(res); //代码正常执行！
                        },100)
                    }else{
                        reject(res);
                    }
                });
            });
        });
    </script>
</head>

<body>
<div style="display: flex">
<!--    下拉搜索 demo-->
    <div style="width: 300px">
        下拉搜索
        <select id="a">
            <option value="">请选择</option>
            <option value="jQuery插件库">abqwertyuiopadfdslkjzxcvbnm</option>
            <option value="BlackBerry">BlackBerry</option>
            <option value="device" selected>device</option>
            <option selected value="with">with</option>
            <option value="newval">手动设置的项目</option>
            <option value="entertainment">entertainment</option>
            <option value="and">and</option>
            <option value="social">social</option>
            <option value="networking">networking</option>
            <option value="apps">apps</option>
            <option value="or">or</option>
            <option value="apps">apps</option>
            <option value="that">that</option>
            <option value="will">will</option>
            <option value="boost">boost</option>
            <option value="your">your</option>
            <option value="productivity">productivity</option>
            <option value="Download">Download</option>
            <option value="or">or</option>
            <option value="buy">buy</option>
            <option value="apps">apps</option>
            <option value="from">from</option>
            <option value="Afbb">Afbb</option>
            <option value="Akademie">Akademie</option>
            <option value="Berlin">Berlin</option>
            <option value="reviews">reviews</option>
            <option value="by">by</option>
            <option value="real">real</option>
        </select>
        <button type="button" onclick="console.log('值为:'+$('#a').val())" >获取值</button>
        <button type="button" onclick="a.set('newval')" >设置值</button>
        <button type="button" onclick="a.set('')" >设置空</button>
    </div>

<!--  下拉搜索分页demo 开发 -->
    <div style="width: 240px;margin-left: 20px">
        下拉搜索分页 自定义服务器数据
        <input id="b">
        <button type="button" onclick="console.log('值为:'+$('#b').val())" >获取值</button>
    </div>

<!--  下拉搜索分页demo 测试 -->
    <div style="width: 240px;margin-left: 20px">
        下拉搜索分页
        <input id="b1">
        <button type="button" onclick="console.log('值为:'+$('#b1').val())" >获取值</button>
        <button type="button" onclick="b1.set('newval')" >设置值1</button>
        <button type="button" onclick="b1.set('newval','设置的值')" >设置值2</button>
        <button type="button" onclick="b1.set('','请选择')" >设置空</button>
    </div>
</div>

</body>
</html>
